<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header">
        <span>工单详情</span>
        <el-button v-if="queryMatch(222)" type="success" size="small" class="bg-green" style="float:right;" @click="toExportData">导出</el-button>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="提交时间：">{{ info['created_at'] }}</el-form-item>
            <el-form-item label="提交人姓名：">{{ info['member_name'] }}</el-form-item>
            <el-form-item label="提交人手机：">{{ info['member_mobile'] }}</el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="工单状态：">
              <el-tag v-if="info['status']===0" type="danger">待签收</el-tag>
              <el-tag v-else-if="info['status']===3" type="success">已解决</el-tag>
              <el-tag v-else type="warning">处理中</el-tag>
            </el-form-item>
            <el-form-item label="所属街道：">{{ (info['street_father_name']||'')+(info['street_son_name']||'') }}</el-form-item>
            <el-form-item label="详细地址：">{{ info['address'] }}</el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-form label-width="140px">
        <el-form-item label="反馈信息：">{{ info['description'] }}</el-form-item>
        <el-form-item>
          <ws-upload-multiple-img :disable="true" :path="info['pic_list_url']"/>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card v-if="info['status']!==0" class="box-1" style="margin-top: 20px;">
      <div slot="header"><span>处理情况</span></div>
      <el-row>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="处理人姓名：" prop="title">{{ info['admin_name'] }}</el-form-item>
            <!--<el-form-item label="处理时间：">{{ info['end_time'] }}</el-form-item>-->
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="处理人手机：">{{ info['admin_mobile'] }}</el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!--<el-form label-width="140px">
        <el-form-item label="管理反馈：">{{ info['admin_name'] + ' ( '+ info['end_time'] + ' ) ' }}</el-form-item>
        <el-form-item label="内容">{{ info['remarks'] }}</el-form-item>
        <el-form-item>
          <ws-upload-multiple-img v-if="info['annex_url'] && info['annex_url'].length>0" :disable="true" :path="info['annex_url']"/>
        </el-form-item>
      </el-form>-->

      <el-form v-for="item in info['work_order_log']" :key="item.id" label-width="140px">
        <el-divider/>
        <el-form-item :label="item['type_txt']+'：'">{{ item['name'] + ' ( '+ item['created_at'] + ' ) ' }}</el-form-item>
        <el-form-item label="内容">{{ item['remarks'] }}</el-form-item>
        <el-form-item>
          <ws-upload-multiple-img v-if="item['annex'] && item['annex'].length>0" :disable="true" :path="item['annex']"/>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ImageUrl: '',
      id: '',
      info: {}
    }
  },
  watch: {},
  created() {
    this.id = this.$route.query.id;
    this.getData();
  },
  methods: {
    getData() {
      const url = 'workorder/orderInfo/' + this.id;
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.info = res.data;
        // 图片列表
        this.info.pic_list_url = [];
        for (const i in this.info.pic_list) {
          this.info.pic_list_url.push({ id: this.info.pic_list[i], url: this.ImageUrl + this.info.pic_list[i] })
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 导出数据
    toExportData() {
      window.open(`${this.$store.getters.serverUrl}/admin/workorder/orderToExcel?type=1&token=${this.$store.getters.token}&id=${this.id}&mallId=${this.$store.getters.SaaSId}`)
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;
}
</style>
